import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import styles from './dialogCenter.module.less';
import BaseVue from '@/lib/base/BaseVue';
@Component
export default class extends BaseVue {
    @Prop({
        default: 'center',
    })
    private mode!: 'center' | 'bottom';

    private get isCenter() {
        return this.mode === 'center';
    }

    public render() {
        const mask = !this.isCenter && (<div class="app-flex-item" onTap={() => {
            this.$emit('clickMask')
        }}></div>);
        return (
            <div
                staticClass="app-flex-wrap"
                class={{
                    [styles.app]: true,
                    'app-flex-row': !this.isCenter,
                    'app-flex-center': this.isCenter,
                    'app-flex-middle': this.isCenter
                }}
            >
                {mask}
                <div onTap={(e) => e.stopPropagation()} staticClass={styles.dialog} class={{ [styles.center]: this.isCenter, [styles.bottom]: !this.isCenter }}>{this.$slots.default}</div>
            </div>
        )
    }
}
